<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/lby.css">
</head>
<body>
        <!-- nav头部 -->
        <div id="nav">
            <div class="nav-jz">
                <div class="jz-lft">
                    <a href="">帮助中心</a>
                    <a href="">收藏</a>
                    <a href="">360官网</a>
                    <a href="">360智慧生活</a>
                </div>
                <div class="jz-rig">
                    <a href="">登录</a>
                    <a href="">注册</a>
                    <i class="iconfont" id="diyigejs">
                        &#xe605;
                    </i>
                    <div class="diyigejs1">
                        您的购物车还没有商品，赶紧去选购吧！
                    </div>
                </div>
    
            </div>
        </div>
    
        <!-- 360商城和搜索框 -->
        <!-- 左边 -->
        <div id="sp360box">
            <h1 class="sp360-logo">
                <img src="./imgs/logo.png" alt="">
                <span><a href="">新品推荐</a></span>
                <span><a href="">热卖榜单</a></span>
            </h1>
            <!-- 右边 -->
            <div class="sp360-rigbox">
                <div class="sp360-rigbox-1">
                    <input type="text" id="txt">
                    <button class="sousuo"><i class="iconfont">&#xe633;</button>
                </div>
                <!-- 右下边 -->
            </div>
            <div class="search-suggest-list">
                <a href="" class="suggest-item">记录仪</a>
                <a href="" class="suggest-item">摄像机</a>
                <a href="" class="suggest-item">路由器</a>
                <a href="" class="suggest-item">耳机</a>
                <a href="" class="suggest-item">扫地机</a>
                <a href="" class="suggest-item">智能手表</a>
            </div>
        </div>
        <!-- 中心内容 -->
    
        </i>
        <div class="zynr">
            <!-- 第一个 -->
            <div class="zynr1">
                <div class="zynr1-jz">
                    <span> <a href=""> 首页 > 全部搜索结果</a></span>
                    <span class="jz-span">
                        全部</span>
                </div>
            </div>
    
            <div class="zynr1">
                <div class="zynr1-jz">
                    <span class="jz-span-1">
                        分类：</span>
                    <span class="jz-span-1">
                        <a href="">手机数码...</a>
                        <a href="">家用电器</a>
                        <a href="">汽车</a>
                        <a href="">家居家纺/餐厨...</a>
                        <a href=""> 生活服务</a>
                    </span>
                </div>
            </div>
            <div class="zynr1">
                <div class="zynr1-jz">
                    <span class="jz-span-1">
                        品牌</span>
                    <span class="jz-span-2"> <a href=""> 360</a>
                        <a href=""> kidio</a></span>
                </div>
            </div>
            <div class="zynr1-jz">
                <span class="jz-span-1">
                    排序</span>
                <span class="jz-span-2">
                    <a href="">默认</a>
                    <a href="">价格</a>
                    <a href=""> <i></i> 仅看有货产品</a></span>
            </div>
        </div>
    
            <!-- 商品渲染 -->
            <div id="list">
                <div class="list-a"> 
          
                  <div class="asd"></div>
                    
            
                   
                    </div>
                </div>


         <!-- 分页器        -->
</body>
<script src="./libs/jquery.js"></script>
<script src="./libs/require.js" data-main="./"></script>
<script src="./js/jquery.pagination.js"></script>
<script src="js/list2.js"></script>
<script src="js/side.js"></script>
</html>

<script>
    class Page{
    constructor(ops){
    
        this.url = ops.url;
        this.pageCont = ops.pageCont;
        this.num = ops.num;
        this.cont = ops.cont;
       
        this.load();
    }
    // 请求数据，调用ajax
    load(){
        $.ajax({
            url:this.url,
            success:res=>{
              
                this.res = JSON.parse(res).msg;
                // console.log(this.res)
                this.createPage()
               
            }
        })
    }
    createPage(){
       
        this.pageCont.pagination(this.res.length, {
            // 一页显示几条数据
            items_per_page:this.num,
            prev_text:"上一页",
			next_text:"下一页",
            callback:(index)=>{            
                this.index = index;
                this.render();
            }
        })
    }
    render(){
    
        let str = "";
        for(var i=this.index*this.num;i<this.index*this.num+this.num;i++){
            if(i < this.res.length){
                str += `<div class="list-b" index="${this.res[i].proId}">
                <a href="./commodity.html?id=${this.res[i].proId}">
                 <img src="${this.res[i].imgs}" alt="" class="click">
                 <p class="list-img" >${this.res[i].proName}</p>
               <em>￥</em> <span>${this.res[i].price}</span>
               </a>
               <p class="shop"><a href="##" class="shopa">加入购物车</a></p>
            </div>`;
            }
        }
        this.cont.html(str);
    }
}

new Page({
    url:"http://localhost:3000/database/commodity.json",
    pageCont:$(".pagination"),
    num:5,
    cont:$("#list").children(".list-a")
})
</script>
